<template>
    <div class="top-nav" style="height: 8vh;">
        <div class="logo">
            <span style="color:white">Logo</span>
        </div>
        <div style="color: #f5f7f9;font-size: 30px;position: relative;left:40%">内部系统管理界面</div>
        <div class="user-profile" style="left: -30px;">

            <div style="color: #f5f7f9">
                <img class="userimg" alt="" src="../assets/images/img1.jpg">
            </div>
            <span class="username">{{ username }}</span>
            <Dropdown trigger="click" style="margin-left: 20px">
                <a href="javascript:void(0)">
                    <Icon type="md-exit" class="iconexit" style="color: #f5f7f9;font-size: 20px"></Icon>
                </a>
                <template #list class="exit">
                    <DropdownMenu>
                        <DropdownItem @click="logout">退出</DropdownItem>
                    </DropdownMenu>
                </template>
            </Dropdown>
        </div>
    </div>
</template>
<script setup>
import { Dropdown, DropdownItem, DropdownMenu, Icon, Image } from "view-ui-plus";
import {ref} from "vue";
import requests from "../public/request.js"
import message from "view-ui-plus/src/components/message/index.js";


const username=ref("John Doe")
const avatarUrl=ref("path_to_avatar")
const dropdownVisible=ref(false)
const token = window.localStorage.getItem("token")
import {useRouter} from "vue-router";


/**
 * 配置
 */

const router = useRouter()

message.config({
  background: true
})


function goToHomePage() {
  // 处理回到首页的逻辑
}
function handleDropdownVisibleChange(visible) {
  dropdownVisible.value = visible;
}
function logout() {
  // 处理退出登录的逻辑
  requests.logout(token).then((res)=>{
    console.log(res)
    if (res.data.code === 200) {
      router.push("/login")
      message.success("退出成功")
    }else {
      message.error(res.data.message)
    }
  })

}
function navigateTo(path) {
  this.$router.push(path);
}
</script>

<style scoped>
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #515A6E;
    padding: 0 20px;
    position: relative;
}

.logo {
    font-size: 24px;
    position: absolute;
    left: 100px;
}

.user-profile {
    position: relative;
    display: flex;
    flex-direction: row;
    text-align: center;
}

.username {
    margin-left: 10px;
    color: white;
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    padding-right: 10px;
}

.userimg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.exit {
    position: relative;
    top: 20px;
    left:50px;
}

.iconexit {
    position: relative;
    top: 15px;
    left: -20px;
}
</style>